<!DOCTYPE html>
<html>
  <head>
    <title>Minimal 1.0 - Widgets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8" />

    <link rel="icon" type="image/ico" href="http://tattek.com/minimal/assets/images/favicon.ico" />
    <!-- Bootstrap -->
    <link href="assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/vendor/animate/animate.css">
    <link type="text/css" rel="stylesheet" media="all" href="assets/js/vendor/mmenu/css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="assets/js/vendor/videobackground/css/jquery.videobackground.css">
    <link rel="stylesheet" href="assets/css/vendor/bootstrap-checkbox.css">

    <link rel="stylesheet" href="assets/js/vendor/summernote/css/summernote.css">
    <link rel="stylesheet" href="assets/js/vendor/summernote/css/summernote-bs3.css">
    <link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen.min.css">
    <link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen-bootstrap.css">
    <link rel="stylesheet" href="assets/js/vendor/owl-carousel/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/js/vendor/owl-carousel/css/owl.theme.css">

    <!-- blueimp Gallery styles -->
    <!-- <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css"> -->
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="assets/js/vendor/jquery-file-upload/css/jquery.fileupload.css">
    <link rel="stylesheet" href="assets/js/vendor/jquery-file-upload/css/jquery.fileupload-ui.css">
    <!-- CSS adjustments for browsers with JavaScript disabled -->
    <noscript><link rel="stylesheet" href="assets/js/vendor/jquery-file-upload/css/jquery.fileupload-noscript.css"></noscript>
    <noscript><link rel="stylesheet" href="assets/js/vendor/jquery-file-upload/css/jquery.fileupload-ui-noscript.css"></noscript>

    <link href="assets/css/minimal.css" rel="stylesheet">
  </head>
  <body class="bg-1">


 

    <!-- Preloader -->
    <!-- <div class="mask"><div id="loader"></div></div> -->
    <!--/Preloader -->

    <!-- Wrap all page content here -->
    <div id="wrap">

      


      <!-- Make page fluid -->
      <div class="row">
        




        <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation" id="navbar">
          


          <!-- Branding -->
          <div class="navbar-header col-md-2">
            <a class="navbar-brand" href="index.html">
              <strong>MIN</strong>IMAL
            </a>
            <div class="sidebar-collapse">
              <a href="#">
                <i class="fa fa-bars"></i>
              </a>
            </div>
          </div>
          <!-- Branding end -->


          <!-- .nav-collapse -->
          <div class="navbar-collapse">
                        
            <!-- Page refresh -->
            <ul class="nav navbar-nav refresh">
              <li class="divided">
                <a href="#" class="page-refresh"><i class="fa fa-refresh"></i></a>
              </li>
            </ul>
            <!-- /Page refresh -->

            <!-- Search -->
            <div class="search" id="main-search">
              <i class="fa fa-search"></i> <input type="text" placeholder="Search...">
            </div>
            <!-- Search end -->

            <!-- Quick Actions -->
            <ul class="nav navbar-nav quick-actions">
              
              <li class="dropdown divided">
                
                <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                  <i class="fa fa-tasks"></i>
                  <span class="label label-transparent-black">2</span>
                </a>

                <ul class="dropdown-menu wide arrow nopadding bordered">
                  <li><h1>You have <strong>2</strong> new tasks</h1></li>
                  <li>
                    <a href="#">
                      <div class="task-info">
                        <div class="desc">Layout</div>
                        <div class="percent">80%</div>
                      </div>
                      <div class="progress progress-striped progress-thin">
                        <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                          <span class="sr-only">40% Complete (success)</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="task-info">
                        <div class="desc">Schemes</div>
                        <div class="percent">15%</div>
                      </div>
                      <div class="progress progress-striped active progress-thin">
                        <div class="progress-bar progress-bar-cyan" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
                          <span class="sr-only">45% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="task-info">
                        <div class="desc">Forms</div>
                        <div class="percent">5%</div>
                      </div>
                      <div class="progress progress-striped progress-thin">
                        <div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 5%">
                          <span class="sr-only">5% Complete (warning)</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="task-info">
                        <div class="desc">JavaScript</div>
                        <div class="percent">30%</div>
                      </div>
                      <div class="progress progress-striped progress-thin">
                        <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                          <span class="sr-only">30% Complete (danger)</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="task-info">
                        <div class="desc">Dropdowns</div>
                        <div class="percent">60%</div>
                      </div>
                      <div class="progress progress-striped progress-thin">
                        <div class="progress-bar progress-bar-amethyst" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                          <span class="sr-only">60% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li><a href="#">Check all tasks <i class="fa fa-angle-right"></i></a></li>
                </ul>

              </li>

              <li class="dropdown divided">
                
                <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                  <i class="fa fa-envelope"></i>
                  <span class="label label-transparent-black">1</span>
                </a>

                <ul class="dropdown-menu wider arrow nopadding messages">
                  <li><h1>You have <strong>1</strong> new message</h1></li>
                  <li>
                    <a class="cyan" href="#">
                      <div class="profile-photo">
                        <img src="assets/images/ici-avatar.jpg" alt />
                      </div>
                      <div class="message-info">
                        <span class="sender">Ing. Imrich Kamarel</span>
                        <span class="time">12 mins</span>
                        <div class="message-content">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
                      </div>
                    </a>
                  </li>

                  <li>
                    <a class="green" href="#">
                      <div class="profile-photo">
                        <img src="assets/images/arnold-avatar.jpg" alt />
                      </div>
                      <div class="message-info">
                        <span class="sender">Arnold Karlsberg</span>
                        <span class="time">1 hour</span>
                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
                      </div>
                    </a>
                  </li>

                  <li>
                    <a href="#">
                      <div class="profile-photo">
                        <img src="assets/images/profile-photo.jpg" alt />
                      </div>
                      <div class="message-info">
                        <span class="sender">John Douey</span>
                        <span class="time">3 hours</span>
                        <div class="message-content">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</div>
                      </div>
                    </a>
                  </li>

                  <li>
                    <a class="red" href="#">
                      <div class="profile-photo">
                        <img src="assets/images/peter-avatar.jpg" alt />
                      </div>
                      <div class="message-info">
                        <span class="sender">Peter Kay</span>
                        <span class="time">5 hours</span>
                        <div class="message-content">Ut enim ad minim veniam, quis nostrud exercitation</div>
                      </div>
                    </a>
                  </li>

                  <li>
                    <a class="orange" href="#">
                      <div class="profile-photo">
                        <img src="assets/images/george-avatar.jpg" alt />
                      </div>
                      <div class="message-info">
                        <span class="sender">George McCain</span>
                        <span class="time">6 hours</span>
                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
                      </div>
                    </a>
                  </li>


                  <li class="topborder"><a href="#">Check all messages <i class="fa fa-angle-right"></i></a></li>
                </ul>

              </li>

              <li class="dropdown divided">
                
                <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                  <i class="fa fa-bell"></i>
                  <span class="label label-transparent-black">3</span>
                </a>

                <ul class="dropdown-menu wide arrow nopadding bordered">
                  <li><h1>You have <strong>3</strong> new notifications</h1></li>
                  
                  <li>
                    <a href="#">
                      <span class="label label-green"><i class="fa fa-user"></i></span>
                      New user registered.
                      <span class="small">18 mins</span>
                    </a>
                  </li>

                  <li>
                    <a href="#">
                      <span class="label label-red"><i class="fa fa-power-off"></i></span>
                      Server down.
                      <span class="small">27 mins</span>
                    </a>
                  </li>

                  <li>
                    <a href="#">
                      <span class="label label-orange"><i class="fa fa-plus"></i></span>
                      New order.
                      <span class="small">36 mins</span>
                    </a>
                  </li>

                  <li>
                    <a href="#">
                      <span class="label label-cyan"><i class="fa fa-power-off"></i></span>
                      Server restared.
                      <span class="small">45 mins</span>
                    </a>
                  </li>

                  <li>
                    <a href="#">
                      <span class="label label-amethyst"><i class="fa fa-power-off"></i></span>
                      Server started.
                      <span class="small">50 mins</span>
                    </a>
                  </li>

                   <li><a href="#">Check all notifications <i class="fa fa-angle-right"></i></a></li>
                </ul>

              </li>

              <li class="dropdown divided user" id="current-user">
                <div class="profile-photo">
                  <!-- <img src="assets/images/profile-photo.jpg" alt /> -->
                </div>
                <a class="dropdown-toggle options" data-toggle="dropdown" href="#">
                  John Douey <i class="fa fa-caret-down"></i>
                </a>
                
                <ul class="dropdown-menu arrow settings">

                  <li>
                    
                    <h3>Backgrounds:</h3>
                    <ul id="color-schemes">
                      <li><a href="#" class="bg-1"></a></li>
                      <li><a href="#" class="bg-2"></a></li>
                      <li><a href="#" class="bg-3"></a></li>
                      <li><a href="#" class="bg-4"></a></li>
                      <li><a href="#" class="bg-5"></a></li>
                      <li><a href="#" class="bg-6"></a></li>
                    </ul>

                  </li>

                </ul>
              </li>

              <li>
                <a href="#mmenu"><i class="fa fa-comments"></i></a>
              </li>
            </ul>
            <!-- /Quick Actions -->



            <!-- Sidebar -->
            <ul class="nav navbar-nav side-nav" id="sidebar">
              
              <li class="collapsed-content"> 
                <ul>
                  <li class="search"><!-- Collapsed search pasting here at 768px --></li>
                </ul>
              </li>

              <li class="navigation" id="navigation">
                <a href="#" class="sidebar-toggle" data-toggle="#navigation">Navigation <i class="fa fa-angle-up"></i></a>
                
                <ul class="menu">
                  
                  <li>
                    <a href="index.html">
                      <i class="fa fa-tachometer"></i> Dashboard
                      <span class="badge badge-red">1</span>
                    </a>
                  </li>

                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <i class="fa fa-list"></i> Forms <b class="fa fa-plus dropdown-plus"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <a href="form-elements.html">
                          <i class="fa fa-caret-right"></i> Common Elements
                        </a>
                      </li>
                      <li>
                        <a href="validation-elements.html">
                          <i class="fa fa-caret-right"></i> Validation
                        </a>
                      </li>
                      <li>
                        <a href="form-wizard.html">
                          <i class="fa fa-caret-right"></i> Form Wizard
                        </a>
                      </li>
                    </ul>
                  </li>

                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <i class="fa fa-pencil"></i> Interface <b class="fa fa-plus dropdown-plus"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <a href="ui-elements.html">
                          <i class="fa fa-caret-right"></i> UI Elements
                        </a>
                      </li>
                      <li>
                        <a href="typography.html">
                          <i class="fa fa-caret-right"></i> Typography
                        </a>
                      </li>
                      <li>
                        <a href="tiles.html">
                          <i class="fa fa-caret-right"></i> Tiles
                        </a>
                      </li>
                    </ul>
                  </li>

                  <li>
                    <a href="buttons.html">
                      <i class="fa fa-tint"></i> Buttons & Icons
                    </a>
                  </li>
                  <li>
                    <a href="grid.html">
                      <i class="fa fa-th"></i> Grid Layout
                    </a>
                  </li>

                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <i class="fa fa-th-large"></i> Tables <b class="fa fa-plus dropdown-plus"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <a href="tables.html">
                          <i class="fa fa-caret-right"></i> Bootstrap Tables
                        </a>
                      </li>
                      <li>
                        <a href="datatables.html">
                          <i class="fa fa-caret-right"></i> DataTables
                        </a>
                      </li>
                    </ul>
                  </li>

                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <i class="fa fa-desktop"></i> Example Pages <b class="fa fa-plus dropdown-plus"></b>
                      <span class="label label-greensea">mails</span>
                    </a>
                    <ul class="dropdown-menu">
                      <li>
                        <a href="login.html">
                          <i class="fa fa-caret-right"></i> Login Page
                        </a>
                      </li>
                      <li>
                        <a href="calendar.html">
                          <i class="fa fa-caret-right"></i> Calendar
                        </a>
                      </li>
                      <li>
                        <a href="page404.html">
                          <i class="fa fa-caret-right"></i> Page 404
                        </a>
                      </li>
                      <li>
                        <a href="page500.html">
                          <i class="fa fa-caret-right"></i> Page 500
                        </a>
                      </li>
                      <li>
                        <a href="page-offline.html">
                          <i class="fa fa-caret-right"></i> Page Offline
                        </a>
                      </li>
                      <li>
                        <a href="gallery.html">
                          <i class="fa fa-caret-right"></i> Gallery
                        </a>
                      </li>
                      <li>
                        <a href="timeline.html">
                          <i class="fa fa-caret-right"></i> Timeline
                        </a>
                      </li>
                      <li>
                        <a href="mail.html">
                          <i class="fa fa-caret-right"></i> Vertical Mail
                          <span class="badge badge-red">5</span>
                        </a>
                      </li>
                      <li>
                        <a href="mail-horizontal.html">
                          <i class="fa fa-caret-right"></i> Horizontal Mail
                          <span class="label label-greensea">mails</span>
                        </a>
                      </li>
                      <li>
                        <a href="vector-maps.html">
                          <i class="fa fa-caret-right"></i> Vector Maps
                        </a>
                      </li>
                      <li>
                        <a href="google-maps.html">
                          <i class="fa fa-caret-right"></i> Google Maps
                        </a>
                      </li>
                    </ul>
                  </li>

                  <li class="active">
                    <a href="widgets.html">
                      <i class="fa fa-play-circle"></i> Widgets
                    </a>
                  </li>

                  <li>
                    <a href="charts.html">
                      <i class="fa fa-bar-chart-o"></i> Charts & Graphs
                    </a>
                  </li>


                </ul>

              </li>


              
            </ul>
            <!-- Sidebar end -->





          </div>
          <!--/.nav-collapse -->





        </div>
        <!-- Fixed navbar end -->
        




        
        <!-- Page content -->
        <div id="content" class="col-md-12">
          








          <!-- page header -->
          <div class="pageheader">
            

            <h2><i class="fa fa-play-circle" style="line-height: 48px;padding-left: 0;"></i> Widgets <span>// Place subtitle here...</span></h2>
            

            <div class="breadcrumbs">
              <ol class="breadcrumb">
                <li>You are here</li>
                <li><a href="index.html">Minimal</a></li>
                <li class="active">Widgets</li>
              </ol>
            </div>


          </div>
          <!-- /page header -->
          
          




          <!-- content main container -->
          <div class="main">




            <!-- row -->
            <div class="row">

              <!-- col 12 -->
              <div class="col-md-12">







              </div>
              <!-- /col 12 -->


              
            </div>
            <!-- /row -->



            <!-- row -->
            <div class="row">
              


              <!-- /col 6 -->
              <div class="col-md-6">
                
                

                <div class="row">



                  <div class="col-sm-6">






                    <!-- tile -->
                    <section class="tile transparent">




                      <!-- tile header -->
                      <div class="tile-header nopadding">               
                        <div class="controls">
                          <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                          <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                      </div>
                      <!-- /tile header -->

                      <!-- tile body -->
                      <div class="tile-body color transparent-black rounded-corners nopadding">
                        <div id="owl-example" class="owl-carousel">
                          
                          <div class="text-center">
                            <h3><strong>John</strong> Douey</h3>
                            <img src="assets/images/profile-photo.jpg" alt class="img-circle">
                            <p class="bg-slategray">Lorem Ipsum dolor sit amet...</p>
                          </div>

                          <div class="text-center">
                            <h3><strong>Arnold</strong> Karlsberg</h3>
                            <img src="assets/images/arnold-avatar.jpg" alt class="img-circle">
                            <p class="bg-slategray">Ut enim ad minim veniam...</p>
                          </div>

                          <div class="text-center">
                            <h3><strong>Peter</strong> Kay</h3>
                            <img src="assets/images/peter-avatar.jpg" alt class="img-circle">
                            <p class="bg-slategray">Duis aute irure dolor in...</p>
                          </div>

                          <div class="text-center">
                            <h3><strong>Anna</strong> Opichia</h3>
                            <img src="assets/images/random-avatar8.jpg" alt class="img-circle">
                            <p class="bg-slategray">Excepteur sint occaecat...</p>
                          </div>

                        </div>
                      </div>
                      <!-- /tile body -->
                    


                    </section>
                    <!-- /tile -->



                  </div>


                  <div class="col-sm-6">


                    <!-- tile -->
                    <section class="tile transparent">




                      <!-- tile header -->
                      <div class="tile-header nopadding">               
                        <div class="controls">
                          <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                          <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                      </div>
                      <!-- /tile header -->

                      <!-- tile widget -->
                      <div class="tile-widget color greensea rounded-top-corners">
                        <div class="text-center">
                          <canvas id="clear-day" width="100" height="100"></canvas>
                        </div>
                      </div>
                      <!-- /tile widget -->

                      <!-- tile body -->
                      <div class="tile-body color transparent-black rounded-bottom-corners">
                        <h2 class="text-center"><span class="animate-number" data-value="26" data-animation-duration="800">0</span>°C</h2>
                        <p class="text-center text-muted"><i class="fa fa-map-marker"></i> Bratislava, SK</p>
                      </div>
                      <!-- /tile body -->
                    


                    </section>
                    <!-- /tile -->



                    <!-- tile -->
                    <section class="tile transparent">




                      <!-- tile header -->
                      <div class="tile-header nopadding">               
                        <div class="controls">
                          <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                          <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                      </div>
                      <!-- /tile header -->

                      <!-- tile widget -->
                      <div class="tile-widget color cyan rounded-top-corners">

                        <div class="fa fa-twitter watermark"></div>
                        
                        <div class="media social-feed">        
                          <span class="pull-left">
                            <img src="assets/images/profile-photo.jpg" alt class="img-circle">
                          </span>

                          <div class="media-body">
                            <h4 class="media-heading"><strong>John</strong> Douey</h4>
                            <small><a href="#">john.douey@minimal.com</a></small>
                          </div>
                        </div>

                        

                      </div>
                      <!-- /tile widget -->

                      <!-- tile body -->
                      <div class="tile-body color transparent-black rounded-bottom-corners">
                        <ul class="inline divided social-feed">
                          <li>
                            <h4>126</h4>
                            Tweets
                          </li>
                          <li>
                            <h4>324</h4>
                            Following
                          </li>
                          <li>
                            <h4>1254</h4>
                            Followers
                          </li>
                        </ul>
                      </div>
                      <!-- /tile body -->
                    


                    </section>
                    <!-- /tile -->


                  </div>


                </div>


                <div class="row">
                  
                  <div class="col-md-12">
                    


                    <!-- tile -->
                    <section class="tile transparent">


                      <!-- tile body -->
                      <div class="tile-body nopadding rounded-corners">

                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                          <!-- Indicators -->
                          <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                          </ol>

                          <!-- Wrapper for slides -->
                          <div class="carousel-inner">
                            <div class="item active">
                              <img src="assets/images/carousel/carousel1.jpg" alt>
                              <div class="carousel-caption">
                                <h3>First Thumbnail label</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              </div>
                            </div>
                            <div class="item">
                              <img src="assets/images/carousel/carousel2.jpg" alt>
                              <div class="carousel-caption">
                                <h3>Second Thumbnail label</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              </div>
                            </div>
                            <div class="item">
                              <img src="assets/images/carousel/carousel3.jpg" alt>
                              <div class="carousel-caption">
                                <h3>Third Thumbnail label</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              </div>
                            </div>
                            <div class="item">
                              <img src="assets/images/carousel/carousel4.jpg" alt>
                              <div class="carousel-caption">
                                <h3>Fourth Thumbnail label</h3>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                              </div>
                            </div>
                          </div>

                          <!-- Controls -->
                          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                            <i class="fa fa-chevron-left fa-lg left-side"></i>
                          </a>
                          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                            <i class="fa fa-chevron-right fa-lg right-side"></i>
                          </a>
                        </div>

                      </div>
                      <!-- /tile body -->
                    
                    


                    </section>
                    <!-- /tile -->



                  </div>

                </div>

              </div>
              <!-- /col 6 -->



              <!-- /col 6 -->
              <div class="col-md-6">
                
                <!-- tile -->
                <section class="tile transparent">




                  <!-- tile header -->
                  <div class="tile-header nopadding">               
                    <div class="controls">
                      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                      <a href="#" class="remove"><i class="fa fa-times"></i></a>
                    </div>
                  </div>
                  <!-- /tile header -->



                  <!-- tile widget -->
                  <div class="tile-widget color transparent-black rounded-top-corners">
                    <form class="form-horizontal" role="form">
                      <div class="form-group">
                        <label for="message-to" class="col-sm-2 control-label font-slab">Recipients</label>
                        <div class="col-sm-10">
                          <select data-placeholder="Select recipients..." multiple="" tabindex="3" class="chosen-select form-control chosen-transparent" id="message-to">
                            <option value="http://tattek.com/minimal/ici@gmail.com">ici@gmail.com</option>
                            <option value="http://tattek.com/minimal/johny@gmail.com">johny@gmail.com</option>
                            <option value="http://tattek.com/minimal/arnie@gmail.com">arnie@gmail.com</option>
                            <option value="http://tattek.com/minimal/pete@gmail.com">pete@gmail.com</option>
                            <option value="http://tattek.com/minimal/gorge@gmail.com">gorge@gmail.com</option>
                          </select>
                        </div>
                      </div>
                  </div>
                  <!-- /tile widget -->



                  <!-- tile body -->
                  <div class="tile-body nopadding">
                  </div>
                  <!-- /tile body -->


                  <!-- tile footer -->
                  <div class="tile-footer rounded-bottom-corners text-right">
                  </div>
                  <!-- /tile footer -->

                


                </section>
                <!-- /tile -->


              

              </div>
              <!-- /col 6 -->




            </div>
            <!-- /row -->


          </div>
          <!-- /content container -->






        </div>
        <!-- Page content end -->




        <div id="mmenu" class="right-panel">

        </div>






      </div>
      <!-- Make page fluid-->




    </div>
    <!-- Wrap all page content end -->



    <section class="videocontent" id="video"></section>



     <!-- The template to display files available for upload -->
    <script id="template-upload" type="text/x-tmpl">
      {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-upload fade">
          <td>
            <span class="preview"></span>
          </td>
          <td>
            <p class="name nomargin">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
          </td>
          <td class="upload">
            <div class="progress-list">
              <div class="details">
                <div class="title">&nbsp;</div>
                <div class="description">Upload progress</div>
              </div>
              <div class="status pull-right">
                <span class="animate-number size" data-value="0" data-animation-duration="1500">Processing...</span>
              </div>
              <div class="clearfix"></div>
              <div class="progress progress-striped active progress-little nomargin" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
            </div>
            
          </td>
          <td class="text-right actions">
            {% if (!i && !o.options.autoUpload) { %}
              <button class="btn btn-cyan start btn-sm" disabled>
                <i class="fa fa-upload"></i>
                <span> Start</span>
              </button>
            {% } %}
            {% if (!i) { %}
              <button class="btn btn-orange cancel btn-sm">
                <i class="fa fa-times"></i>
                <span> Cancel</span>
              </button>
            {% } %}
          </td>
        </tr>
      {% } %}
    </script>

    <!-- The template to display files available for download -->
    <script id="template-download" type="text/x-tmpl">
      {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download fade">
          <td>
            <span class="preview">
              {% if (file.thumbnailUrl) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
              {% } %}
            </span>
          </td>
          <td>
            <p class="name nomargin">
              {% if (file.url) { %}
                  <a href="{%=file.url%}" class="white" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
              {% } else { %}
                  <span>{%=file.name%}</span>
              {% } %}
            </p>
            {% if (file.error) { %}
              <div><span class="label label-red">Error</span> {%=file.error%}</div>
            {% } %}
          </td>
          <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
          </td>
          <td class="text-right actions">
            {% if (file.deleteUrl) { %}
              <div class="checkbox inline">
                <input type="checkbox" value="1" id="delete-{%=file.name%}" class="toggle">
                <label for="delete-{%=file.name%}"></label>
              </div>
              <button class="btn btn-red btn-sm delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                <i class="fa fa-trash-o"></i>
                <span> Delete</span>
              </button>
            {% } else { %}
              <button class="btn btn-orange btn-sm cancel">
                <i class="fa fa-times"></i>
                <span> Cancel</span>
              </button>
            {% } %}
          </td>
        </tr>
      {% } %}
    </script>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/vendor/bootstrap/bootstrap.min.js"></script>
    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sons-of-obsidian"></script>
    <script type="text/javascript" src="assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
    <script type="text/javascript" src="assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
    <script type="text/javascript" src="assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
    <script type="text/javascript" src="assets/js/vendor/videobackground/jquery.videobackground.js"></script>
    <script type="text/javascript" src="assets/js/vendor/blockui/jquery.blockUI.js"></script>

    <script src="assets/js/vendor/skycons/skycons.js"></script>

    <script src="assets/js/vendor/summernote/summernote.min.js"></script>

    <script src="assets/js/vendor/chosen/chosen.jquery.min.js"></script>

    <script src="assets/js/vendor/owl-carousel/owl.carousel.min.js"></script>

    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
    <script src="assets/js/vendor/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
    <!-- The Templates plugin is included to render the upload/download listings -->
    <!-- <script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script> -->
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <!-- <script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js"></script> -->
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <!-- <script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script> -->
    <!-- blueimp Gallery script -->
    <!-- <script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> -->
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="assets/js/vendor/jquery-file-upload/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="assets/js/vendor/jquery-file-upload/jquery.fileupload.js"></script>
    <!-- The File Upload processing plugin -->
    <script src="assets/js/vendor/jquery-file-upload/jquery.fileupload-process.js"></script>
    <!-- The File Upload image preview & resize plugin -->
    <script src="assets/js/vendor/jquery-file-upload/jquery.fileupload-image.js"></script>
    <!-- The File Upload audio preview plugin -->
    <script src="assets/js/vendor/jquery-file-upload/jquery.fileupload-audio.js"></script>
    <!-- The File Upload video preview plugin -->
    <script src="assets/js/vendor/jquery-file-upload/jquery.fileupload-video.js"></script>
    <!-- The File Upload validation plugin -->
    <script src="assets/js/vendor/jquery-file-upload/jquery.fileupload-validate.js"></script>
    <!-- The File Upload user interface plugin -->
    <script src="assets/js/vendor/jquery-file-upload/jquery.fileupload-ui.js"></script>
    <!-- The main application script -->
    <script src="assets/js/vendor/jquery-file-upload/fileupload-main.js"></script>

    <script src="assets/js/minimal.min.js"></script>

    <script>
    $(function(){

      //todo's
      $('#todolist li label').click(function() {
        $(this).toggleClass('done');
      });

      //weather icons
      var icons = new Skycons({"color": "white"});
      icons.set("clear-day", Skycons.CLEAR_DAY);
      icons.play();

      //owl carousel
      $("#owl-example").owlCarousel({
        singleItem: true,
        autoPlay: true,
        navigation: true,
        slideSpeed: 400,
        paginationSpeed: 500,
        navigationText: ['<i class="fa fa-chevron-left"></i>','<i class="fa fa-chevron-right"></i>']
      });

      //load wysiwyg editor
      $('#quick-message-content').summernote({
        toolbar: [
          //['style', ['style']], // no style button
          ['style', ['bold', 'italic', 'underline', 'clear']],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['height', ['height']],
          //['insert', ['picture', 'link']], // no insert buttons
          //['table', ['table']], // no table button
          //['help', ['help']] //no help button
        ],
        height: 295   //set editable area's height
      });

      //multiselect input
      $(".chosen-select").chosen({disable_search_threshold: 10});
      
    })
      
    </script>
  </body>
</html>
      
